<div class="stb-calendar" [class.stb-calendar-landspace]="mode">

  <stbui-date-display [selectedDate]="selectedDate"></stbui-date-display>

  <div class="stb-calendar-container">
    <div class="stb-calendar-monthday-container">
      <stbui-calendar-toolbar [displayDates]="displayDates" (monthChange)="onMonthChange($event)"></stbui-calendar-toolbar>

      <div class="stb-calendar-week">
        <span class="stb-calendar-week-day">一</span>
        <span class="stb-calendar-week-day">二</span>
        <span class="stb-calendar-week-day">三</span>
        <span class="stb-calendar-week-day">四</span>
        <span class="stb-calendar-week-day">五</span>
        <span class="stb-calendar-week-day">六</span>
        <span class="stb-calendar-week-day">日</span>
      </div>

      <div class="stb-calendar-monthday">
        <div class="stb-calendar-monthday-slide">
          <stbui-calendar-month (selected)="onSelected($event)" [displayDate]="displayDate" *ngFor="let displayDate of displayDates"></stbui-calendar-month>
        </div>
      </div>

    </div>

    <div class="stb-calendar-actions">
      <button mat-button color="primary" (click)="onCancelDatePickerTriggered()">取消</button>
      <button mat-button color="primary" (click)="onConfirmDatePickerTriggered()">确定</button>
    </div>

  </div>
</div>
